<!--
 * @Author: zhw
 * @Date: 2025-08-02 17:27:07
 * @LastEditTime: 2023-12-04 16:14:10
 * @LastEditors: zhw
 * @Description: 公共组件->弹框选择
-->
<template>
  <div class="TheChoiceModel">
    <el-input 
      v-model="selectValue" 
      readonly 
      placeholder="请选择" 
      prefix-icon="operation" 
      @click.native="disabled ? null : openModal()" 
    />
    <el-dialog 
      v-model="showModel" 
      width="60%"
    >
      <p style="color: red">{{ tableDesc }}</p>
      <TheTable
        ref="TheTableRef"
        :tableApi="tableApi"
        :mustQuery="mustQuery"
        :searchList="searchList"
        :listColumns="listColumns"
        :isPage="isPage"
        :selection="selection"
        @setChoiceInfo="setChoiceInfo"
      />
      <template slot="footer">
        <span class="dialog-footer">
          <el-button @click="showModel = false">关闭</el-button>
          <el-button type="primary" @click="handleChoice()"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script name="TheChoiceModel">
import TheTable from '@/componentsView/TheTable.vue';

export default {
  components: {
    TheTable
  },
  props: {
    // table列表数据API
    tableApi: {
      type: Function,
      default: () => {}
    },
    // 搜索栏
    searchList: {
      type: Array,
      default: () => []
    },
    // 表头信息
    listColumns: {
      type: Array,
      default: () => []
    },
    // 表单操作栏
    actionArr: {
      type: Array,
      default: () => []
    },
    // 请求必传参数
    mustQuery: {
      type: Object,
      default: () => {}
    },
    // 单选/多选
    selection: {
      type: String,
      default: 'radio'
    },
    // 是否可点击
    disabled: {
      type: Boolean,
      default: false
    },
    // 是否分页
    isPage: {
      type: Boolean,
      default: true
    },
    tableDesc: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showModel: false,
      choiceList: [],
      selectValue: ''
    };
  },
  methods: {
    openModal() {
      this.showModel = true;
    },
    setChoiceInfo(value) {
      this.choiceList = value;
    },
    handleChoice() {
      this.showModel = false;
      this.$emit('callback', this.choiceList);
    },
    setShowValue(value) {
      this.selectValue = value;
    }
  },
  // 暴露方法供父组件调用
  expose: ['setShowValue'] // Vue 2.6+ 支持expose选项，低版本可使用this.$refs直接访问
};
</script>